<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="position: relative; top: 5px">搜索呀</span>
        <el-button-group style="float: right; padding: 3px 0" type="text">
          <!--style="float: right; padding: 3px 0" type="text"-->
          <el-button type="info" size="mini" @click="btnSearch"
            ><i class="el-icon-search"></i>搜索</el-button
          >
          <el-button type="info" size="mini" @click="btnReset"
            ><i class="el-icon-refresh"></i>重置</el-button
          >
        </el-button-group>
      </div>
      <el-form :model="searchForm" :inline="true">
        <el-row :gutter="20">
          <el-col :span="colSize">
            <el-form-item label="商品名称">
              <el-input
                v-model="searchForm.keyword"
                placeholder="商品名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="colSize">
            <el-form-item label="商品货号">
              <el-input
                v-model="searchForm.brandId"
                placeholder="商品货号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="colSize">
            <el-form-item label="商品分类">
              <!--级联选择器-->
              <el-cascader
                v-model="productCateValue"
                :options="productCateOptions"
                :props="{ expandTrigger: 'hover', label: 'name', value: 'id' }"
                @change="handleCateChange"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="colSize">
            <el-form-item label="商品品牌">
              <el-select v-model="searchForm.brandId" placeholder="请选择">
                <el-option
                  v-for="item in productBrandList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="colSize">
            <el-form-item label="上架状态">
              <el-select
                v-model="searchForm.publishStatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in publishStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="colSize">
            <el-form-item label="审核状态">
              <el-select v-model="searchForm.verifyStatus" placeholder="请选择">
                <el-option
                  v-for="item in verifyStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="position: relative; top: 5px">商品列表</span>
        <el-button-group style="float: right; padding: 3px 0" type="text">
          <!--style="float: right; padding: 3px 0" type="text"-->
          <el-button type="info" size="mini" @click="btnAdd"
            ><i class="el-icon-circle-plus"></i>添加商品</el-button
          >
          <el-button type="info" size="mini"
            ><i class="el-icon-delete"></i>批量删除</el-button
          >
        </el-button-group>
      </div>
      <el-table size="mini" :data="productList" border style="width: 100%">
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column align="center" prop="id" label="编号" width="80">
        </el-table-column>
        <el-table-column align="center" label="图片" width="180">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.pic"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" width="150" label="商品名称">
          <template slot-scope="scope">
            <p>{{ scope.row.name }}</p>
            <p>品牌:{{ scope.row.brandName }}</p>
          </template>
        </el-table-column>
        <el-table-column width="150" align="center" label="价格/货号">
          <template slot-scope="scope">
            <p>价格￥:{{ scope.row.price }}</p>
            <p>货号:{{ scope.row.productSn }}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签">
          <template slot-scope="scope">
            <p>
              上架:<el-switch
                :v-model="scope.row.publicStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </p>

            <p>
              新品:<el-switch
                :v-model="scope.row.newStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </p>
            <p>
              推荐:<el-switch
                :v-model="scope.row.recommandStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sort" label="排序" width="60">
        </el-table-column>
        <el-table-column width="60" align="center" label="SKU库存">
          <template>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sale" label="销量" width="60">
        </el-table-column>
        <el-table-column align="center" label="审核状态">
          <template slot-scope="scope">
            <p>{{ scope.row.verifyStatus | verifyStatusFilter }}</p>
            <p><el-button type="text">审核详情</el-button></p>
          </template>
        </el-table-column>
        <!-- 自定义的操作栏 -->
        <el-table-column width="160" align="center" label="操作">
          <template slot-scope="scope">
            <p>
              <el-button size="mini">查看</el-button>
              <el-button size="mini">编辑</el-button>
            </p>
            <p>
              <el-button size="mini">日志</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="btnDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        style="margin-top: 20px"
        background
        @size-change="btnSearch"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10, 15]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="productForm" label-width="80px">
        <el-form-item label="日期">
          <el-input v-model="productForm.date"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="productForm.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="productForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { api_productList } from '../../api/product'
import { api_listWithChildren } from '../../api/productCate'
import { api_brandList } from '../../api/brand'

export default {
  name: 'productList',

  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 5,
        totalPage: 3,
        total: 11
      },
      searchForm: {
        keyword: null,
        pageNum: 1,
        pageSize: 5,
        publishStatus: null,
        verifyStatus: null,
        productSn: null,
        productCategoryId: null,
        brandId: null
      },
      editRowIndex: -1,
      dialogFormVisible: false,
      productForm: {
        date: '',
        name: '',
        address: ''
      },
      value: null,
      options: [],
      productBrandList: [],
      productList: [],
      colSize: 8,
      publishStatusOptions: [
        {
          value: 1,
          label: '上架'
        },
        {
          value: 0,
          label: '下架'
        }
      ],
      verifyStatusOptions: [
        {
          value: 1,
          label: '审核通过'
        },
        {
          value: 0,
          label: '未审核'
        }
      ],
      productCateValue: [],
      productCateOptions: []
    }
  },
  filters: {
    verifyStatusFilter(value) {
      let text = '审核通过'
      if (value !== 1) {
        text = '未审核'
      }
      return text
    }
  },
  created() {
    this.handleProductList()
    this.handleProductCate()
    this.handleProductBrandList()
  },
  methods: {
    handleCurrentChange() {},
    async handleProductBrandList() {
      const { data: res } = await api_brandList({
        pageSize: 100,
        pageNum: 1
      })

      this.productBrandList = res.data.list
    },
    async handleProductList() {
      const { data: res } = await api_productList(this.searchForm)
      // console.log('商品', res)
      // console.log('商品', res.data.list)
      this.productList = res.data.list
    },

    async handleProductCate() {
      this.productCateOptions = []
      const { data: res } = await api_listWithChildren()
      //最简单的级联方式
      this.productCateOptions = res.data

      //console.log('商品种类',res);
      /*
                分析item
                要获取的是
                {
                label:
                value:
                children
                }

                */
      //可以完成级联功能，不过太麻烦
      // let list = res.data
      // for (let item of list) {
      //   let node = {
      //     label: '',
      //     value: -1,
      //     children: []
      //   }
      //   console.log('item是', item)
      //   node.label = item.name
      //   node.value = item.id
      //   if (item.children != null && item.children.length > 0) {
      //     //遍历item中的children
      //     for (let child of item.children) {
      //       node.children.push({
      //         label: child.name,
      //         value: child.id
      //       })
      //     }
      //   }
      //
      //   this.productCateOptions.push(node)
      //}

      /*for(let i = 0; i<list.length; i++){
                    let node = {
                        label: null,
                        value: null,
                        children: null
                    }
                    let children = [];
                    let item = list[i].children;

                    node.value = list[i].id;
                    node.label = list[i].name;
                    node.children = children;
                    if(item != null && item.length > 0){
                        for(let j = 0; j < item.length; j++){
                            children.push({
                                label: item.name,
                                value: item.id
                            })
                        }
                    }
                    this.options.push(node);

                }*/
    },
    btnSave() {
      this.dialogFormVisible = false

      if (this.editRowIndex == -1) {
        //添加
        /**
         * unshift()  头部插入 但是我的是插入最后一行内容，与自己的插入内容无关
         * push()   底部插入
         * splice(从哪里开始，删除几个，添加)  删除0个，就是添加
         */
        //this.tableData.unshift(this.productForm)
        // this.tableData.push(this.productForm);
      } else {
        //修改 这个方法在添加之后执行，输入数据的数据无法在表单中显示，但是可以修改，修改方法谷歌好像不支持
        //this.tableData.splice(this.editRowIndex, 1, this.productForm);
        // console.log('数据：：',this.productForm)
      }
      //清空productForm
      this.productForm = { brand_right: 0 }
    },
    handleCateChange(value) {
      console.log(value)
    },
    btnEdit(index, row) {
      this.dialogFormVisible = true
      this.editRowIndex = index
      //console.log(index, row);
      //显示当前编辑行的数据
      this.productForm.date = row.date
      this.productForm.name = row.name
      this.productForm.address = row.address
      //清空productForm
    },
    btnAdd() {
      this.dialogFormVisible = true
      this.editRowIndex = -1
    },
    btnDelete(index, row) {
      console.log(index, row)
      this.$confirm(`确认删除${row.name}吗？`, '删除', {
        confirmButtonText: '确定'
      }).then(() => {
        let res = this.tableData.splice(index, 1)
        let mes = '删除成功'
        if (!res) {
          mes = '删除失败'
        }
        this.$message({
          type: 'info',
          message: mes
        })
      })
    },
    btnSearch() {
      this.searchForm.productCategoryId = this.productCateValue[1]
      this.handleProductList()
    },
    btnReset() {}
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 15px 4px;
}
</style>
